<template>
  <div class="container">
    <div class="content">
      <div class="box line box-ac">
        <div class="box-f1">报销金额</div>
        <amount-input :direction="2" class="amount tx-r right"></amount-input>
      </div>
      <div class="box line">
        <div>事由</div>
        <input ref="causeInput" placeholder="" :readonly="readonly || bizAccountBill.isComExpense" :class="{'tc-999': readonly}" v-model="bizAccountBill.cause" class="right box-f1 tx-r" />
      </div>
      <div class="box line">
        <div >收款账号</div>
        <div class="right box-f1 tx-r tc-999">{{bizAccountBill.payeeAccount}}</div>
      </div>
      <div class="box line">
        <div >收款银行</div>
        <div class="right box-f1 tx-r tc-999">{{bizAccountBill.payeeBank}}</div>
      </div>
      <div class="box line">
        <div >收款人</div>
        <div class="right box-f1 tx-r tc-999">{{bizAccountBill.personName}}</div>
      </div>
      <div class="box line">
        <div >报销公司</div>
        <div @click="selectCompany" :class="{'tc-999': readonly}" class="right box-f1 tx-r">{{bizAccountBill.companyName}}</div>
      </div>
      <div class="box line bor-none">
        <div >报销部门</div>
        <div @click="selectDep" :class="{'tc-999': readonly}" class="right box-f1 tx-r">{{bizAccountBill.costCenterName}}</div>
      </div>
    </div>
    <div class="tips-content tc-888">
      <div class="head box box-ac">
        <div class="box-f1"></div>
        <div class="text">温馨提示</div>
        <div class="box-f1"></div>
      </div>
      <div class="tips box">
        <div class="icon icon-invoice-tips"></div>
        <div class="tc-666">
          若收款账号和银行有误，请到个人中心-我的-<span @click="setAccount()" class="tc-main">报销账户设置</span>进行修改。
        </div>
      </div>
      <div class="tips box">
        <div class="icon icon-invoice-tips"></div>
        <div class="tc-666">
          如收款人名称与实际不符，请联系公司IT进行处理，否则会被银行退票！
        </div>
      </div>
    </div>
    <div class="bottom box box-ac">
      <div v-if="!bizAccountBill.state || bizAccountBill.state == 20" @click="handleSubmit(0)" class="btn box box-f1 box-ac box-jc w-p100">暂存草稿</div>
      <div v-if="bizAccountBill.state == 25" @click="abandonNewBills()" class="btn box box-f1 box-ac box-jc w-p100">废弃</div>
      <div @click="handleSubmit(1)" class="btn box box-f1 box-ac box-jc w-p100">发起K2</div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import amountInput from '@/components/amountInput'
import { abandonNewBills } from '@/assets/js/api'
import { getBillConfig, getJMByBillNum } from '@/assets/js/common'
export default {
  name: 'baoxiaoStep3',
  components: {
    amountInput
  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState(['userNum', 'userInfo', 'bizAccountBill']),
    readonly () {
      let state = this.bizAccountBill.state || 20
      return (+state !== 20)
    }
  },
  mounted () {
    this.$nextTick(() => {
      if (!this.bizAccountBill.cause && !this.bizAccountBill.isComExpense) {
        this.$refs.causeInput.focus()
      }
    })
  },
  methods: {
    setAccount () {
      // window.open(this.$config.url.bxaccount)
      location.href = this.$config.url.bxaccount
    },
    selectCompany () {
      if (this.readonly) return
      this.$router.push('/selectCompany')
    },
    selectDep () {
      if (this.readonly) return
      this.$router.push({
        path: '/selectDep',
        query: {
          companyNum: this.bizAccountBill.companyNum
        }
      })
    },
    handleSubmit (isSubmit) {
      if (!/^[\d]+$/.test(this.bizAccountBill.payeeAccount)) {
        let message = '收款银行账号不能为空且不能含有空格或者特殊字符，请您先在个人中心进行报销账户设置'
        if (!this.bizAccountBill.payeeAccount) {
          message = '您的收款银行账号为空，请您先在个人中心进行报销账户设置'
        }
        return this.$tools.popup({
          tpl: 'alert',
          title: '提示',
          content: message,
          buttons: ['取消', `<div class="tc-main">前往设置</div>`],
          buttonCallBack: index => {
            if (index === 1) this.setAccount()
          }
        })
      }
      if (!this.bizAccountBill.amount) {
        return this.$tools.openToast({
          msg: '请填写报销金额',
          duration: 3000
        })
      }
      if (!this.bizAccountBill.cause) {
        return this.$tools.openToast({
          msg: '请填写事由',
          duration: 3000
        })
      }
      if (isSubmit === 1) {
        this.$tools.popup({
          tpl: 'alert',
          title: '是否要发起K2？',
          content: '发起K2后单据内容将不允许再修改， 如需修改则需要废弃重新填写。',
          buttons: ['否', `<div class="tc-main">是</div>`],
          buttonCallBack: index => {
            if (index === 1) this.saveBill(isSubmit)
          }
        })
      } else {
        this.saveBill(isSubmit)
      }
    },
    saveBill (isSubmit) {
      if (+this.bizAccountBill.state === 25) {
        this.initK2()
        return
      }
      let bizAccountBill = {
        amount: this.bizAccountBill.amount, // 报销金额
        isSubmit: isSubmit, // 是否提交 1-是 0-否
        biller: this.userNum, // 制单人编码
        cause: this.bizAccountBill.cause, // 事由
        bizAccountNum: this.bizAccountBill.billNum, // 费用报销单编码
        companyNum: this.bizAccountBill.companyNum, // 公司编码
        costDeptNum: this.bizAccountBill.costDeptNum, // 部门编码
        expenseID: this.bizAccountBill.expenseId, // 费用类型id
        amountStriked: '', // 冲借款金额
        realAmount: '', // 实付金额
        budgetDate: this.bizAccountBill.bizReqDate, // 预算归属日期(yyyy-MM-dd)
        expense: '', // 费用说明
        receiveAccount: this.bizAccountBill.payeeAccount, // 收款人账号
        iseinvoice: this.bizAccountBill.iseinvoice,
        einvoiceId: this.bizAccountBill.checkedInvoice.list,
        otherExpenseNum: '',
        isFromApp: '2'
      }
      this.$http({
        url: this.$config.api.host,
        data: {
          method: 'saveBizAccountBills',
          bizAccountBill: JSON.stringify(bizAccountBill)
        }
      }).then(res => {
        if (res.code === 200) {
          this.$store.commit('bizAccountBill', {
            billNum: res.number
          })
          if (isSubmit === 0) {
            this.$store.commit('bizAccountBill', {
              state: 20
            })
            this.$tools.openToast({
              msg: '暂存成功',
              duration: 2000
            })
          } else {
            this.$store.commit('getBudgetDo')
            this.$store.commit('bizAccountBill', {
              state: 25
            })
            this.initK2()
          }
        }
      })
    },
    initK2 () {
      let billNum = this.bizAccountBill.billNum
      let JM = getJMByBillNum(billNum)
      let billConfig = getBillConfig()
      let k2Data = {}
      k2Data.iseinvoice = this.bizAccountBill.iseinvoice
      k2Data.billNum = billNum
      k2Data.BSID = billConfig[JM].BSID
      k2Data.ExpenseType = this.bizAccountBill.expenseNum
      k2Data.sCapital = this.bizAccountBill.amount
      k2Data.sProcessSubject = this.userInfo.userNum + '_' + this.bizAccountBill.expenseName + '_' + billConfig[JM]['title']
      sessionStorage.setItem('k2Data', JSON.stringify(k2Data))
      this.$router.push('/sendK2')
    },
    // 废弃单据
    abandonNewBills () {
      abandonNewBills(this.bizAccountBill.billNum, () => {
        this.$store.commit('resetBizAccountBill')
        this.$router.replace('/')
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/css/config';
@import '../assets/css/mixins';
.content{
  margin-top:.35rem;
  background-color:#FFF;
  padding:.25rem .4rem;
}

.line{
  padding:.3rem .2rem;
  font-size:.3rem;
  border-bottom: 1px solid $borderColor;
  &:nth-last-child(){
    border:none;
  }
  .amount{
    font-size:.42rem;
  }
}
.tips-content{
  padding:.35rem;
  .head{
    font-size:.24rem;
    .text{
      margin:0 .2rem;
    }
    .box-f1{
      border-top:1px solid $borderColor;
    }
  }
  .tips{
    font-size:.2rem;
    padding:0;
    padding-top:.2rem;
  }
}
.bottom{
  position:absolute;
  bottom:0;
  width:100%;
  background-color: $themeColor;
  height:1rem;
  font-size:.36rem;
  .btn{
    color:#FFF;
    height:100%;
    &:nth-of-type(2){
      color:$themeColor;
      background-color:#FFF;
    }
  }
}
</style>
